
{% extends "./inc/appbase.html" %}
{% block style%}
<style>
    .area {
        margin: 20px auto 0px auto;
    }

    .mui-input-group {
        margin-top: 10px;
    }

    .mui-input-group:first-child {
        margin-top: 20px;
    }

    .mui-input-group label {
        width: 40%;
    }

    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {
        width: 60%;
    }

    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 6px;
    }

    .mui-content-padded {
        margin-top: 25px;
    }

    .mui-btn {
        padding: 10px;
    }

    .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
    }

    .spliter {
        color: #bbb;
        padding: 0px 8px;
    }

    .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .oauth-area .oauth-btn {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
    }

    .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
    }

    .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
    }
    .mui-input-row label~#verificationCode{width:35%;box-sizing: border-box;}
    .mui-input-row .mui-btn{width: 23%;box-sizing: border-box;right:10px;padding: 8px 0px;}
    .mui-btn-outlined {margin-top:3px;color: #007aff;border: 1px solid #007aff; }

</style>
{%endblock%}
{% block content%}
<header class="mui-bar mui-bar-nav">
    <a href="/login" class=" mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>首页</a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>

</header>
<div class="mui-content">
    <form id='login-form' class="mui-input-group">
        
        <div class="mui-input-row">
            <label>手机号码</label>
            <input id='mobile' type="number" value="" name="mobile" class="mui-input-clear mui-input" placeholder="手机号码">
        </div>
        
        <div class="mui-input-row">
             <label>手机验证码</label>
             <button type="button" id="btnVerificationCode" class="mui-btn mui-btn-outlined">获取验证码</button>
             <input id="verificationCode" type="text" class="mui-input" placeholder="请输入验证码">
        </div>
        <div class="mui-input-row">
            <label>新密码</label>
            <input id='password' type="password" value="" name="password" class="mui-input-clear mui-input" placeholder="请输入新密码">
        </div>
        <div class="mui-input-row">
            <label>确认新密码</label>
            <input id='password2' type="password" value="" name="password2" class="mui-input-clear mui-input" placeholder="确认新密码">
        </div>
    </form>
    
    <div class="mui-content-padded">
        <button id='login' class="mui-btn mui-btn-block mui-btn-primary">提交</button>
    </div>
</div>

{% endblock %}
{% block script %}

<script>
    
    var btn = document.getElementById("login"),
    mobile = document.getElementById('mobile'),
    password = document.getElementById("password"),
    password2 = document.getElementById('password2');

    var btnVerificationCode = document.getElementById("btnVerificationCode");
    var verificationCode = document.getElementById("verificationCode");
    
    
    btn.addEventListener("tap", function () {
    	
    	if(!mobile.value){
          mui.toast('手机号码不能为空');
          return;
        }

        if(!verificationCode.value){
          mui.toast('验证码不能为空');
          return;
        }
        
        if(!password.value){
            mui.toast("新密码不能为空");
            return;
        }
        
        if(!password2.value){
          mui.toast('确认新密码不能为空');
          return;
        }
        
        mui.post('/center/public/resetpwd',{
          mobile:mobile.value,
          password:password.value,
          password2:password2.value,
          verifcode:verificationCode.value,
          clause:'on'
        },function(msg){
                    //服务器返回响应，根据响应结果，分析是否登录成功；
            if(msg.errno === 1000){
                mui.toast(msg.errmsg);
            }else{
                mui.toast(msg.data.name);
                setTimeout(function(){
                    mui.openWindow({url:msg.data.url})
                },1500);
            }
          },'json'
        );
    });

    btnVerificationCode.addEventListener("tap",function () {
    	senmobile();
    });

    var issend = true;
    function senmobile() {
			if(issend) {
			//验证电话号码手机号码  
			var phoneObj = document.getElementById('mobile');
			if(phoneObj.value != "") {
			   var phoneVal = phoneObj.value;
			   var p1 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
			   var me = false;
			   if(p1.test(phoneVal)) me = true;
			   if(!me) {
				   phoneObj.value = '';
				   mui.toast('请输入正确的手机号码');
				   phoneObj.focus();
				   return false;
			   }else {
                   issend = false;
                   getverifcode(60);
			   }
			} else {
				mui.toast('手机号码不能为空');
				return false;
			  }
			}
		   }
				
	function update_a(num, t) {
				if(num == t) {
                    $(btnVerificationCode).removeClass('disabled').prop('disabled',false);
					btnVerificationCode.innerHTML = " 重新发送 ";
					issend = true;
				} else {
					var printnr = t - num;
					btnVerificationCode.innerHTML = printnr + " 秒后重发";
				}
    };

    function getverifcode(t) {
        mui.post('/center/message/verifcode',{
          phone: mobile.value,
		  type: 2
        },function(data){
            //服务器返回响应，根据响应结果，分析是否登录成功；
            console.log("发送data--:"+JSON.stringify(data));
            if(data.errno==0){
               mui.toast(data.data);
               $(btnVerificationCode).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
               for(i = 1; i <= t; i++) {
				 window.setTimeout("update_a(" + i + "," + t + ")", i * 1000);
			   }
            }else {
               mui.toast(data.errmsg);
               issend = true;
               $(btnVerificationCode).removeClass('disabled').prop('disabled',false);
            }
          },'json'
        );
	}
</script>
{% endblock %}